<template>
  <view class="page-order">
    <!-- 菜单 -->
    <view class="page-header-tabs">
      <uiTabs
        :navPerView="3"
        v-model="activeIndex"
        :height="98"
        :lineHeight="6"
        lineWidth="64rpx"
        @change="handleChangeTabs"
      >
        <uiTabsItem title="全部"></uiTabsItem>
        <uiTabsItem title="未支付"></uiTabsItem>
        <uiTabsItem title="已支付"></uiTabsItem>
      </uiTabs>
    </view>
    <uiScroll
      class="page-scroll"
      top="102rpx"
      ref="mescrollRef"
      @init="mescrollInit"
      :up="upOption"
      @up="loadOrderListData"
    >
      <orderBasicComp
        v-for="(item, index) in list"
        :key="index"
        :orderNo="item.orderNo"
        :orderStatus="item.orderStatus"
        :orderTime="item.orderTime"
        :orderType="item.orderType"
        :lessonName="item.lessonName"
        :tradeName="item.tradeName"
        :lessonPic="item.lessonPic"
        :deadline="item.deadline"
        :amount="item.amount"
      ></orderBasicComp>
    </uiScroll>
  </view>
</template>

<script>
import uiScroll from "@/components/base/scroll/mescroll-body";
import uiScrollMixins from "@/components/base/scroll/mescroll-mixins.js";
import orderBasicComp from "./components/order-basic";
import { queryOrderListApi } from "api/order/order.js";
import uiTabs from "@/components/base/tabs/index";
import uiTabsItem from "@/components/base/tabs-item/index";
import { url } from "@/utils/url.js";

export default {
  name: "orderManagePage",
  components: {
    uiScroll,
    orderBasicComp,
    uiTabs,
    uiTabsItem
  },
  mixins: [uiScrollMixins],
  data() {
    return {
      // 下拉刷新的常用配置
      downOption: {
        use: false, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        textNoMore: "没有更多数据",
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 5, // 每页数据的数量,默认10
          totalPage: 1
        },
        empty: {
          tip: "暂无相关数据"
        }
      },
      // 当前页面查询的参数
      activeIndex: 1,
      list: []
    };
  },
  created() {
    // this.loadRecommended();
  },

  methods: {
    loadOrderListData(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      var params = {
        page: {
          currentPage: page.num,
          pageNumber: pageSize
        },
        status: this.activeIndex == 0 ? null : this.activeIndex
      };
      var _this = this;
      queryOrderListApi(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(result.list); //追加新数据
        this.mescroll.endByPage(this.list.length, result.page.totalPage);
      });
    },

    handleChangeTabs() {
      this.list = [];
      this.upOption.page.num = 0;
      this.loadOrderListData(this.upOption.page);
    }
  }
};
</script>

<style scoped lang="scss" >
.page-header-tabs {
  z-index: 9990;
  position: fixed;
  top: --window-top; /* css变量 */
  left: 0;
  width: 100%;
  height: 98upx;
  background-color: white;
}

>>> .page-scroll {
  padding-top: 98upx;
}
</style>
